import { InfoCircleOutlined } from '@ant-design/icons';
import { TinyArea, TinyColumn, Progress } from '@ant-design/charts';
import { Col, Row, Tooltip } from 'antd';
import ChartCard from '../components/ChartCard';
import Field from '../components/Field';
import Trend from '../components/Trend';
import { randomNumber, randomNumberArray } from '../../../util/random';
import styles from './style.less';
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: {
    marginBottom: 24,
  },
};
const DVarray = randomNumberArray(10, 2);
const MVarray = randomNumberArray(10, 4);
const contractNumber = randomNumberArray(10, 1);
const operationNumber = Number(randomNumber(2));
const IntroduceRow = ({ loading, visitData }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="日访问量"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={DVarray.reduce((total, cur) => total + cur)}
        footer={<Field label="日访问量" value={DVarray[9]} />}
        contentHeight={46}
      >
        <TinyArea
          color="#c77eb5"
          xField="x"
          height={46}
          forceFit
          yField="y"
          smooth
          data={DVarray}
        />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="月访问量"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={MVarray.reduce((t, c) => t + c)}
        footer={<Field label="月访问量" value={MVarray[9]} />}
        contentHeight={46}
      >
        <TinyArea
          color="#975FE4"
          xField="x"
          height={46}
          forceFit
          yField="y"
          smooth
          data={MVarray}
        />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="合同签约总数"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={contractNumber.reduce((t, c) => t + c)}
        footer={<Field label="转化率" value="60%" />}
        contentHeight={46}
      >
        <TinyColumn xField="x" height={46} forceFit yField="y" data={contractNumber} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title="运营活动效果"
        action={
          <Tooltip title="指标说明">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={`${operationNumber}%`}
        footer={
          <div
            style={{
              whiteSpace: 'nowrap',
              overflow: 'hidden',
            }}
          >
            <Trend
              flag="up"
              style={{
                marginRight: 16,
              }}
            >
              周同比
              <span className={styles.trendText}>{`${randomNumber(1)}%`}</span>
            </Trend>
            <Trend flag="down">
              日同比
              <span className={styles.trendText}>{`${randomNumber(1)}%`}</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <Progress
          height={46}
          percent={operationNumber * 0.01}
          color="#13C2C2"
          forceFit
          size={8}
          marker={[
            {
              value: 0.8,
              style: {
                stroke: '#13C2C2',
              },
            },
          ]}
        />
      </ChartCard>
    </Col>
  </Row>
);

export default IntroduceRow;
